---
layout: default
title: Home
description: "TypeScript brings you optional static type-checking along with the latest ECMAScript features."
keywords: "type checker, javascript, transpiler, compiler, static types"
---

<div class="home">
    <div class="drawer-overlay"></div>
    <!-- content -->
    <div class="container-fluid skyline-container">
        <div class="row top_section">
            <div class="col-md-12 column bannerContainer">
                <div class="skyline-img-background"></div>
                <div class="skyline-img-foreground"></div>
                <div class="banner">
                    <img class="bannerLogo  center-block hidden-xs" src="/assets/images/logo.svg" alt="Logo">
                    <div class="bannerText">
                        <div class="bannerTextHeadline">
                            JavaScript that scales.
                        </div>
                        <p>TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.</p>
                        <p>Any browser. Any host. Any OS. Open source.</p>
                    </div>
                </div>
                <div class="row btn-group btn-group-lg bannerButtons">
                    <div class="col-sm-6">
                        <a class="btn" href="#download-links" aria-label="Jump to Downloads">
                            Download
                        </a>
                    </div>
                    <div class="col-sm-6">
                        <a class="btn" href="../docs/index.html">
                            Documentation
                        </a>
                    </div>
                </div>
            </div>
        </div> <!-- End of skyline section -->

        <div class="container-fluid swimlane-alternate swimlane-carousel">
            <div class="container">
                <div class="row">
                    <h2 class="hashtag centered"><a href="https://twitter.com/intent/tweet?text=%23iHeartTypeScript">#iHeartTypeScript</a></h2>
                    <div class="col-sm-offset-1 col-sm-10">
                        <div id="social-proof-carousel" class="carousel slide">
                            <a class="left carousel-control" href="#social-proof-carousel" role="button" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <div class="carousel-inner">
                                {% for section in site.data.tweet_quotes %}
                                {% assign section_id = forloop.index0 %}
                                <div class="item {% if forloop.first %}active{% endif %}">
                                    <div class="container-fluid">
                                        <div class="row tweets">
                                            {% for tweet in section %}
                                            {% capture name_id %}tweet-{{section_id}}_{{forloop.index0}}-name{% endcapture %}
                                            {% capture avatar_url %}/assets/images/socialproof/twitterprofiles/{{tweet.twitter_handle}}.{% if tweet.avatar_extension %}{{tweet.avatar_extension}}{% else %}jpg{% endif %}{% endcapture %}
                                            <div class="col-md-4">
                                                <blockquote class="twitter-tweet" data-lang="en">
                                                <a class="twitter-profile-image" role="img" aria-labelledby="{{name_id}}" style="background-image: url('{{avatar_url}}')" href="{{tweet.tweet_url}}" target="_blank"></a>
                                                <span class="twitter-name" id="{{name_id}}">{{tweet.twitter_name}} </span><span class=twitter-handle>@{{tweet.twitter_handle}} </span>
                                                <p lang="en" dir="ltr">{{tweet.tweet_content}}</p>
                                                </blockquote>
                                            </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                            <a class="right carousel-control twetes" href="#social-proof-carousel" role="button" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid value-props">
        <div class="container">
            <div class="row clearfix ">
                <div class="row box-highlight-containers">
                    <div class="col-md-4">
                        <div class="box-headline-img js-icon center-block">
                            <img src="/assets/images/startsAndEndsWithJavascript.png" role="presentation">
                        </div>
                        <div class="box-text">
                            <h3>
                                <span class="line">Starts and ends with</span>
                                <span class="line">JavaScript</span>
                            </h3>
                            <p>TypeScript starts from the same syntax and semantics that millions of JavaScript developers know today.
                            Use existing JavaScript code, incorporate popular JavaScript libraries, and call TypeScript code from JavaScript.</p>
                            <p>TypeScript compiles to clean, simple JavaScript code which runs on any browser, in Node.js, or in any JavaScript engine that supports ECMAScript 3 (or newer).</p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="box-headline-img crane-icon center-block">
                            <img src="/assets/images/crane.png" role="presentation">
                        </div>
                        <div class="box-text middle-box">
                            <h3>
                                <span class="line">Strong tools for</span>
                                <span class="line">large apps</span>
                            </h3>
                            <p>
                                Types enable JavaScript developers to use highly-productive development tools and practices like static checking and code refactoring when developing JavaScript applications.
                            </p>
                            <p>
                                Types are optional, and type inference allows a few type annotations to make a big difference to the static verification of your code. Types let you define interfaces between software components and gain insights into the behavior of existing JavaScript libraries.
                            </p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="box-headline-img soa-icon center-block">
                            <img src="/assets/images/stateOfTheArtJavascript_16x.svg" role="presentation">
                        </div>
                        <div class="box-text">
                            <h3>
                                <span class="line">State of the art</span>
                                <span class="line">JavaScript</span>
                            </h3>
                            <p>TypeScript offers support for the latest and evolving JavaScript features, including those from ECMAScript 2015 and future proposals, like async functions and decorators, to help build robust components.</p>
                            <p>These features are available at development time for high-confidence app development, but are compiled into simple JavaScript that targets ECMAScript 3 (or newer) environments.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12 girder-background">
                    <div class="btn-group btn-group-lg center-block">
                        <div class="btn-vert-block">
                            <a href="../docs/index.html" class="btn center-block">
                                Learn it fast
                            </a>
                        </div>
                    </div>
                    <div id="download-links"></div>
                </div>
            </div>
        </div>
    </div>



    <div class="container-fluid light-theme row-download-typescript">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <h1>Get TypeScript</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 col-sm-6">
                    <h3>Node.js</h3>
                    <p>The command-line TypeScript compiler can be installed as a Node.js package.</p>
                    <div class="node-samples">
                        <dl class="clearfix">
                            <dt>Install</dt>
                            <dd>npm install -g typescript</dd>
                        </dl>
                        <dl class="clearfix">
                            <dt>Compile</dt>
                            <dd>tsc helloworld.ts</dd>
                        </dl>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <h3>Visual Studio</h3>
                    <ul class="IDE-native">
                        <li class="visualstudio-2019"><a target="_blank" href="{{ site.data.urls.vs2019_download }}">Visual Studio 2019</a></li>
                        <li class="vscode"><a target="_blank" href="{{ site.data.urls.vscode_download }}">Visual Studio Code</a></li>
                        <li class="visualstudio-2017"><a target="_blank" href="{{ site.data.urls.vs2017_download }}">Visual Studio 2017</a></li>
                    </ul>
                </div>
                <div class="col-md-5 col-sm-8 col-xs-9 others">
                    <div class="row">
                        <h3>And More...</h3>
                        <div class="col-xs-6">
                            <ul class="IDE-plugins">
                                <li class="sublime"><a target="_blank" href="{{ site.data.urls.sublime_ts_download }}">Sublime Text</a></li>
                                <li class="atom"><a target="_blank" href="{{ site.data.urls.atom_ts_download }}">Atom</a></li>
                                <li class="eclipse"><a target="_blank" href="{{ site.data.urls.eclipse_ts_download }}">Eclipse</a></li>
                            </ul>
                        </div>
                        <div class="col-xs-6">
                            <ul class="IDE-plugins">
                                <li class="emacs"><a target="_blank" href="{{ site.data.urls.emacs_ts_download }}">Emacs</a></li>
                                <li class="webstorm"><a target="_blank" href="{{ site.data.urls.webstorm_download }}">WebStorm</a></li>
                                <li class="vim"><a target="_blank" href="{{ site.data.urls.vim_ts_download }}">Vim</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid swimlane-alternate">
        <div class="container">
            <div class="row">
                <h1>See TypeScript in Action</h1>
                {% comment %}<iframe src="https://channel9.msdn.com/Events/Build/2017/B8088/player" class="video" allowFullScreen frameBorder="0" title="Video of TypeScript in action"></iframe>{% endcomment %}
                <a target="_blank" class="highlight-border" href="https://channel9.msdn.com/Events/Build/2017/B8088/" aria-label="Watch a video of TypeScript in action."><img src="assets/images/anders-video.png" class="video" alt="Link to TypeScript video"/></a>
            </div>
        </div>
    </div>
    <div class="container-fluid middle-row">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h1>Open Source</h1>

                    <p>TypeScript is being developed on GitHub. The TypeScript compiler is implemented in TypeScript and can be used in any JavaScript host.</p>

                    <ul class="opensource-list">
                        <li><p>Play with the <a href="#download-links">bits</a> and <a href="{{ site.data.urls.ts_github_issues }}" target="_blank">file bugs</a>.</p></li>
                        <li><p>Join the <a href="{{ site.data.urls.ts_twitter_search }}" target="_blank">#typescript</a> Twitter discussion and <a onclick="reportAction('Download', 'source', {'location': '/'})" href="{{ site.data.urls.ts_github }}">follow the GitHub project</a>.</p></li>
                    </ul>

                    <a class="btn" href="{{ site.data.urls.ts_github }}" onclick="reportAction('Download', 'source', {'location': '/'})">
                        Get the source code
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid swimlane-alternate swimlane-carousel">
        <div class="container">
            <div class="row">
                <div class="col-sm-offset-1 col-sm-10">
                    <h1>Why TypeScript?</h1>
                    <div id="friend-carousel" class="carousel slide" data-ride="carousel">
                        <!-- Back control -->
                        <a class="left carousel-control" href="#friend-carousel" role="button" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>

                        <!-- Wrapper for slides -->
                        <div class="carousel-inner">
                            <!-- SLIDE START -->
                            <div class="item active">
                                <div class="friend-container">
                                    <div class="friend-item">
                                        <div class="image-container">
                                            <a href="community/friends.html" aria-label="Angular and other friends of TypeScript">
                                                <img src="assets/images/friends/Angular/logo.png" class="friend-logo" role="presentation">
                                            </a>
                                        </div>
                                        <div class="quote-container">
                                            <p><em>We love TypeScript for many things&hellip; With TypeScript, several of our team members have said things like '<strong>I now actually understand most of our own code!</strong>' because they can easily traverse it and understand relationships much better. And we’ve <strong>found several bugs via TypeScript’s checks</strong>.”</em></p>
                                        </div>
                                        <div class="author-container">
                                            <p><em>&mdash; Brad Green, Engineering Director - AngularJS</em></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="friend-container">
                                    <div class="friend-item">
                                        <div class="image-container">
                                            <a href="community/friends.html" aria-label="Ionic and other friends of TypeScript">
                                                <img src="assets/images/friends/Ionic/logo.png" class="friend-logo" role="presentation">
                                            </a>
                                        </div>
                                        <div class="quote-container">
                                            <p><em>“One of Ionic's main goals is to <strong>make app development as quick and easy as possible</strong>, and the <strong>tooling support TypeScript gives us with autocompletion, type checking and source documentation</strong> really aligns with that.”</em></p>
                                        </div>
                                        <div class="author-container">
                                            <p><em>&mdash; Tim Lancina, Tooling Developer - Ionic</em></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="friend-container">
                                    <div class="friend-item">
                                        <div class="image-container">
                                            <a href="community/friends.html" aria-label="NativeScript and other friends of TypeScript">
                                                <img src="assets/images/friends/NativeScript/logo.png" class="friend-logo" role="presentation">
                                            </a>
                                        </div>
                                        <div class="quote-container">
                                            <p><em>“TypeScript helped us to <strong>reuse the team’s knowledge</strong> and to <strong>keep the same team velocity</strong> by providing the same excellent developer experience as C# ... A huge improvement over plain JavaScript.”</em></p>
                                        </div>
                                        <div class="author-container">
                                            <p><em>&mdash; Valio Stoychev, PM Lead - NativeScript</em></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="friend-container">
                                    <div class="friend-item">
                                        <div class="image-container">
                                            <a href="community/friends.html" aria-label="Aurelia and other friends of TypeScript">
                                                <img src="assets/images/friends/Aurelia/logo.png" class="friend-logo" role="presentation">
                                            </a>
                                        </div>
                                        <div class="quote-container">
                                            <p><em>“By combining Aurelia with TypeScript for modern web, mobile and desktop development, we've seen what is perhaps the <strong>most beautiful and elegant app development workflow to date</strong>.”</em></p>
                                        </div>
                                        <div class="author-container">
                                            <p><em>&mdash; Rob Eisenberg, Architect - Aurelia</em></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="friend-container">
                                    <div class="friend-item">
                                        <div class="image-container">
                                            <a href="community/friends.html" aria-label="Dojo and other friends of TypeScript">
                                                <img src="assets/images/friends/Dojo/logo.png" class="friend-logo" role="presentation">
                                            </a>
                                        </div>
                                        <div class="quote-container">
                                            <p><em>TypeScript has helped ensure that Dojo 2 will be built on rock solid foundations, which <strong>will make enterprise development better</strong>. TypeScript gives us <strong>all the benefits of ES6, plus more productivity</strong>, … and <strong>responsive support from the TypeScript team</strong>.”</em></p>
                                        </div>
                                        <div class="author-container">
                                            <p><em>&mdash; Dylan Schiemann, Co-founder - Dojo Toolkit, CEO - SitePen</em></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="friend-container">
                                    <div class="friend-item">
                                        <div class="image-container">
                                            <a href="community/friends.html" aria-label="Epic and other friends of TypeScript">
                                                <img src="assets/images/friends/Epic/logo.png" class="friend-logo" role="presentation">
                                            </a>
                                        </div>
                                        <div class="quote-container">
                                            <p><em>“TypeScript is a <strong>smart choice when writing a modern web- or JavaScript-based application</strong>. TypeScript’s carefully considered language features and functionality, and its consistently improving tools, result in a <strong>terrifically productive development experience</strong>.”</em></p>
                                        </div>
                                        <div class="author-container">
                                            <p><em>&mdash; Aaron Cornelius, Research Fellow - Epic</em></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Forward control -->
                        <a class="right carousel-control" href="#friend-carousel" role="button" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>

                    <!-- END OF CAROUSEL -->
                    </div>

                    <a class="more-friends" href="community/friends.html"><p class="text-center">See more friends of TypeScript</p></a>

                </div>
            </div>
        </div>
    </div>

</div>

<div class="container-fluid next-steps-container">
    <div class="container ">
        <div class="row">
            <div class="col-sm-6">
                <div class="value-prop-1">
                    <div class="next-step-header">Contribute</div>
                    <div class="content">
                        <div class="spacer"></div>
                        <div>
                            Help shape the future of TypeScript by joining our community today
                            and send us pull requests via our <a href="{{ site.data.urls.ts_github }}">GitHub repository</a>!
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="value-prop-2">
                    <div class="separator hidden-xs"></div>
                    <div class="next-step-header">Learn</div>
                    <div class="content">
                        <div class="spacer"></div>
                        <div>
                            <div><a href="/docs/">Docs</a> - To help you get started</div>
                            <div><a href="{{ site.data.urls.ts_github }}" target="_blank">GitHub</a> &amp; <a href="{{ site.data.urls.ts_stackoverflow_tagged }}" target="_blank">Stack Overflow</a> - File and discuss issues</div>
                            <div><a href="{{ site.data.urls.ts_blog }}" target="_blank">Blog</a> &amp; <a href="{{ site.data.urls.ts_twitter }}" target="_blank">Twitter</a> - Stay up to date</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
 $(document).ready(function () {

    $(".video-btn").each(function () {
        $(this).magnificPopup({
            items: {
                src: '<video class="video-content" src="' + this.href + '" controls="controls" autoplay="autoplay">' + '</video>',
                type: 'inline'
            },
            disableOn: 700,
            mainClass: 'mfp-fade',
            showCloseBtn: true,
            callbacks: {
                open: function () {
                    $(this.content[0]).on('play', function () {
                        reportAction('video', 'play');
                    });

                    $(this.content[0]).on('pause', function () {
                        reportAction('video', 'pause');
                    });

                    $(this.content[0]).on('ended', function () {
                        reportAction('video', 'ended');
                    });
                }
            }
        });
    });
});
</script>
